<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="${pageContext.request.contextPath}/css/normalize.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/css/Header.css" rel="stylesheet" type="text/css">
    <style>
        .head {
            padding: 10px 10px;
            width: 98%;
            height: 60px;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            border-bottom: 1px solid #ccc;
            box-shadow: 0 0 10px #ccc;
        }

        .userImg > img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-left: 10px;
        }

        .bot {
            position: absolute;
            top: 90px;
            left: 0;
            width: 99.5%;
            height: 65px;
            background-color: #e4e4e4;
        }

        .bot ul {
            display: flex;
        }

        .bot ul li > a {
            display: inline-block;
            line-height: 55px;
            padding: 0 26px;
            margin: 10px;
            color: #464646;
            border-radius: 5px 5px 0 0;
        }

        .bot .active {
            color: #1b87ec;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="head">
    <a href="../login.html" target="_parent" class="username" style="font-weight: 700;font-size: 18px;">登录</a>

    <div class="bot">
        <ul>
            <li><a target="_parent" href="${pageContext.request.contextPath}/CompanyServlet">供应商-基础信息</a></li>
            <li><a target="_parent" href="${pageContext.request.contextPath}/MarketServlet">供应商-市场信息</a></li>
            <li><a target="_parent" href="${pageContext.request.contextPath}/ShareholderServlet">供应商-股东信息</a>
            </li>
            <li><a target="_parent" href="${pageContext.request.contextPath}/ContactsServlet">供应商-联系人信息</a></li>
            <li><a target="_parent" href="${pageContext.request.contextPath}/BankServlet">供应商-收款信息</a></li>
        </ul>
    </div>
</div>

<script>
    var a = document.querySelectorAll('li a');

    window.addEventListener('message', (e) => {
        console.log(e.data);
        for (let i = 0; i < a.length; i++) {
            if (a[i].href.substr(a[i].href.lastIndexOf('/')) == e.data) {
                a[i].className = 'active'
            }
        }
    }, false);
</script>
</body>
</html>